	<!-- MAIN -->
		<div class="main">
			<!-- MAIN CONTENT -->
			<div class="main-content">
				<div class="container-fluid">
					<h3 class="page-title">角色</h3>
					<div class="row">
						<form action="" method="post" role=form  enctype="multipart/form-data">
							<div class="panel">
								<div class="panel-heading">
									<h3 class="panel-title">角色添加</h3>
								</div>
								<div class="panel-body">


									<input type="text" class="form-control" name="name" placeholder="请输入名称">

										<div class="panel-body">
										<label class="fancy-radio">
										<span>是否启用</span>
										<input type="radio" value="1" name="status">
										<span><i></i>是</span>
										</label>
										<label class="fancy-radio">
										<input type="radio" value="0" name="status">
										<span><i></i>否</span>
										</label>
										</div>
									<input class="form-control" type="submit" value="提交">
									<br>
                                     <div class="container-fluid">
                                     <div class="col-md-12">
							<!-- TASKS -->
							
								<div class="panel-heading">
									<h3 class="title">My Tasks</h3>

									<div class="col-md-12">
							<!-- TODO LIST -->
							
								
									<ul class="list-unstyled todo-list">
									
									<div class="col-md-1">
											<li>
											<label>
												<input type="checkbox">      全选
											</label>
                                              </li>
                                              </div>
                                     <div class="col-md-1">
											<li>

											<label>
												<input type="checkbox">      取消
											</label>
											</li>
											</div>
											
										
									</ul>
								
							</div>


									<div class="right">
										<button class="btn-toggle-collapse" type="button"><i class="lnr lnr-chevron-up"></i></button>
										
									</div>
								</div>

                              <?php foreach($parent as $v){ ?>
								<div class="col-md-3" style="display: block;">
								<h3 class="all">
								<label> 
								<input type="checkbox" name="power[]" value="<?=$v['id']?>"> <?=$v['name']?></label></h3>
									<ul class="unstyled">
                                        <?php foreach($child as $ve){
                                            if($v['id']==$ve['pid']){
                                        ?>
										<li>
										<label><input type="checkbox"  name="power[]" value="<?=$ve['id']?>"><?=$ve['name']?></label>	
										</li>
										<?php } }?>
										
									
									</ul>
								</div>
                                 <?php }?>

							</div>
							</div>
							<!-- END TODO LIST -->
						</div>
						
					</div>

				</form>
												
	</div>
		<script src="resources/assets/jquery-3.2.1.min.js"></script>
<script type="text/javascript" >


	$(function(){
		// 给'.all :checkbox'绑定点击事件
		$('.all :checkbox').click(function(){
			// alert(22)
		 // $(this).parent().parent().next().find(':checkbox').prop('checked',true);
           // 如果点击的是选中状态
		 if($(this).is(':checked')){
		 	// 查找到所有选择框调为选中状态
		 	$(this).parent().parent().next().find(':checkbox').prop('checked',true);
		}else{
			// 查找到所有选择框调为未选中状态
            $(this).parent().parent().next().find(':checkbox').prop('checked',false);
		}
	 })  
	  // .unstyled :checkbox绑定点击事件
	    $('.unstyled :checkbox').click(function(){
             // 获取所有选择框中已经选中状态的个数
	    	var len = $(this).parent().parent().parent().find(':checkbox:checked').length;

            // 个数大0
	    	if(len>0){
             // 把最上级的选择框选中
            $(this).parent().parent().parent().prev().find(':checkbox').prop('checked',true);

	    	}else{
	    		// 把最上级的选择框取消选中
	    		 $(this).parent().parent().parent().prev().find(':checkbox').prop('checked',false);
	    	}
  
	   })	
       
		
})


</script>